<template>
    <div v-if="list">
        <div class="title">
            <span>购物车</span>
            <span>编辑</span>
        </div>
        <div class="order">
            <!--  店铺名称  -->
            <!--            <div class="store">-->
            <!--                <van-checkbox v-model="checked"></van-checkbox>-->
            <!--                <van-icon name="wap-home"/>-->
            <!--                <span>胖猫官方商城</span>-->
            <!--            </div>-->
            <!--  商品订单  -->
            <div class="commodity" v-for="commodity in list.cartList">
                <van-checkbox @click="isCheckd(commodity.productId,commodity.checked)"
                              v-model="commodity.checked"></van-checkbox>
                <van-swipe-cell>
                    <van-card
                            @click-thumb="toPage(commodity.goodsSn)"
                            :price="commodity.price"
                            :thumb="commodity.picUrl">
                        <template #title>
                            <span @click="toPage(commodity.goodsSn)">{{ commodity.goodsName }}</span>
                        </template>
                        <template #num>
                            <van-stepper v-model="commodity.number"/>
                        </template>
                    </van-card>
                    <template #right>
                        <van-button @click="deleteHandle(commodity.productId)" square text="删除" type="danger"
                                    class="delete-button"/>
                    </template>
                </van-swipe-cell>
            </div>
        </div>
        <!--  提交订单  -->
        <van-submit-bar :price="list.cartTotal.checkedGoodsAmount*100" button-text="提交订单">
            <van-checkbox v-model="checked">全选</van-checkbox>
            <!--      <template #tip>-->
            <!--        你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>-->
            <!--      </template>-->
        </van-submit-bar>
        <!--  Tabbar标签底栏  -->
        <van-tabbar v-model="active" active-color="#F6412D" :fixed="true" :border="true">
            <van-tabbar-item replace to="/index" icon="home-o">主页</van-tabbar-item>
            <van-tabbar-item replace to="/classify" icon="apps-o">分类</van-tabbar-item>
            <van-tabbar-item replace to="/shoppingcart" icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item replace to="/user" icon="contact">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    export default {
        name: "ShoppingCart",
        data() {
            return {
                active: 2,
                checked: true,
                value: 2,
                list: null
            }
        },
        methods: {
            async deleteHandle(id) {
                // 删除单个购物车
                let arr = []
                arr.push(id)
                const del = await this.$post('cart/delete', {
                    productIds: arr
                })
                // 删除成功重新获取最新的购物车列表
                this.getCart()
                console.log(del.data.data)
            },
            async getCart() {
                // 获取购物车列表
                let get1 = await this.$get('cart/index')
                this.list = get1.data.data
                console.log(this.list)
            },
            toPage(id) {
                // 点击图片去往商品详情页面
                // console.log(id)
                this.$router.push({
                    name: 'goodsmsg',
                    query: {
                        id: id
                    }
                })
            },
            async isCheckd(id, checked) {
                // 选中或取消商品
                let arr = []
                arr.push(id)
                await this.$post('cart/checked', {
                    productIds: arr,
                    isChecked: checked,
                })
                    .then(res => {
                        console.log(res)
                    })
                // 每次选中或取消完成都应该更新购物车列表
                this.getCart()
            }
        },
        async created() {
            this.getCart()
            // const get = await this.$post('cart/checked',{
            //     productIds: [107],
            //     isChecked: false
            // })
            // console.log(get)
        }
    }
</script>

<style lang="less" scoped>
  .title {
    width: 375px;
    height: 45px;
    line-height: 45px;
    font-size: 18px;
    border-bottom: 1px solid #D9D9D9;
    text-align: center;

    :last-child {
      position: absolute;
      margin-left: 70px;
      font-size: 14px;
    }
  }

  .order {
    margin-top: 23px;
    margin-bottom: 120px;
    width: 375px;
    font-size: 15px;

    .store {
      padding-bottom: 4px;
      margin-bottom: 8px;
      display: flex;
      flex-direction: row;
      height: 23px;
      line-height: 23px;
      border-bottom: 1px solid #D9D9D9;

      .van-checkbox {
        margin-left: 10px;
      }

      :nth-child(2) {
        margin-left: 8px;
        margin-right: 2px;
        color: #4D4D4D;
      }

      .van-icon-wap-home {
        line-height: 23px;
      }
    }

    .goods-card {
      margin: 0;
    }

    .delete-button {
      height: 100%;
    }

    .commodity {
      margin-bottom: 14px;
      display: flex;
    }

    .van-checkbox {
      margin-left: 13px;
      padding-left: 20px;
      width: 40px;
      background-color: #fff;
    }

    .van-card {
      width: 290px;
      background-color: #fff;
    }
  }

  //.commodity {
  //  display: flex;
  //  flex-direction: row;
  //  margin-bottom: 22px;
  //
  //  .van-checkbox {
  //    margin-left: 10px;
  //    margin-right: 13px;
  //  }
  //  .txt {
  //    margin-left: 12px;
  //    margin-right: 12px;
  //    width: 191px;
  //    height: 34px;
  //    font-size: 12px;
  //  }
  //  .number {
  //    width: 58px;
  //    height: 49px;
  //    .price {
  //      font-size: 12px;
  //    }
  //    .num {
  //      margin-top: 17px;
  //      font-size: 11px;
  //      text-align: right;
  //      color: #858585;
  //    }
  //  }
  //}
  //}

  .van-submit-bar {
    margin-bottom: 50px;
  }
</style>
